<template>
  <div class="wrap">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#304155"
          text-color="#fff"
          active-text-color="#409eff"
          :router=true
        >
          <el-menu-item index="/home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>博客管理</span>
            </template>
            <el-menu-item-group class="subme">
              <el-menu-item index="/bloa" class="el-icon-notebook-1"
                >文章管理</el-menu-item
              >
              <el-menu-item index="/cation" class="el-icon-s-order"
                >分类管理</el-menu-item
              >
              <el-menu-item index="/label" class="el-icon-collection-tag"
                >标签管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="/sement">
            <i class="el-icon-picture-outline-round"></i>
            <span slot="title">广告管理</span>
          </el-menu-item>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group class="subme">
              <el-menu-item index="/user" class="el-icon-user-solid"
                >用户管理</el-menu-item
              >
              <el-menu-item index="/role" class="el-icon-coin"
                >角色管理</el-menu-item
              >
              <el-menu-item index="/menu" class="el-icon-menu"
                >菜单管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="5">
            <i class="el-icon-link"></i>
            <span slot="title">积云教育官网</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header> <meat></meat> </el-header>
        <el-main> <router-view></router-view></el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import meat from "../components/meta.vue"
export default {
  components:{
      meat
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang='scss' scoped>
.el-submenu .el-menu-item {
  width: 100%;
}
.subme .el-menu-item {
  background-color: #1e2d3d !important;
}
.wrap{
    height: 100%;
}
.el-aside{
    height: 100%;
    background-color: #304155 !important;
}
.el-container{
    height: 100%;
}
.el-menu{
    border-right:none;
}
.el-header{
    padding: 0 0;
}

</style>

